<template>
    <div>
        <h2>当前求和为：{{ sum }} -- {{school}}</h2>
        <select v-model.number="n">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
        <button @click="add">加</button>
        <button @click="minus">减</button>
    </div>
</template>

<script lang="ts" setup name="Count">
import {ref} from "vue";
import {useCountStore} from "@/store/count";
import {storeToRefs} from "pinia";

let useCount = useCountStore()
// storeToRefs只会关注store中数据，不会对方法进行ref包裹
let {sum,school} = storeToRefs(useCount)
let n = ref(1)

function add() {
    // 第一种修改方式
    // useCount.sum += 1
//     方式二
//     useCount.$patch({
//         sum: 888,
//         school: 'atguigu'
//     })
//     方式三
    useCount.increment(n.value)
}

function minus() {
    useCount.sum -= n.value
}
</script>

<style scoped>
button, select {
    height: 50px;
    margin-right: 10px;
}
</style>
